<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-button @click="addOne" type="primary" size="mini" icon="el-icon-plus" circle></el-button>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input2">
                    </el-input>
                </el-col>
            </el-row>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="名称" width="120">
                </el-table-column>
                <el-table-column prop="comments" label="备注" width="width">
                </el-table-column>
                <el-table-column label="操作" width="width">
                    <template slot-scope="{row,$index}">
                        <el-button @click="fixRow(row)" type="primary" size="mini" circle icon="el-icon-edit-outline">
                        </el-button>
                        <el-button @click="removeRow(row)" type="warning" size="mini" circle icon="el-icon-delete">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- //分页器 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="pageInfo.current" :page-sizes="[10, 30, 50]" :page-size="pageInfo.pageSize"
                layout="sizes, prev, pager, next" :total="pageInfo.totalItems"></el-pagination>
        </el-card>
        <!-- //对话框 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
            <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="comments">
                    <el-input v-model="form.comments"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="type == 1" type="primary" @click="submitForm('form')">保存</el-button>
                    <el-button v-else type="primary" @click="submitForm('form')">更新</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { reqGetList, reqAddOne, reqUpdateOne, reqDelete, reqGetPage } from '@/api/contentTags'
export default {
    name: '',
    data() {
        return {
            title: '',
            input2: "",
            dialogVisible: false,
            dialogVisible2: false,
            tableData: [],
            multipleSelection: [],
            pageInfo: {
                current: 1,
                pageSize: 10,
                searchkey: "",
                // totalItems: 43,
                totalPage: 5
            },
            form: {
                alias: "",
                comments: "",
                name: "",
                date: "",
                id: "",
                url: "",
                __v: '',
                _id: "",
            },
            rules: {
                name: [
                    { required: true, message: '请输入 名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                comments: [
                    { required: true, message: '请输入 备注', trigger: 'change' }
                ],
            }
        }
    },
    mounted() {
        //挂载页面数据
        this.getList()
    },
    methods: {
        //挂载页面数据
        async getList() {
            let result = await reqGetList()
            this.tableData = result.data.docs
            this.pageInfo = result.data.pageInfo
        },
        //添加
        addOne() {
            this.form = {}
            this.title = '填写标签信息'
            this.type = 1
            this.dialogVisible = true
        },
        //修改
        fixRow(row) {
            console.log(row);
            this.title = '修改标签信息'
            this.type = 2
            this.dialogVisible = true
            this.form.comments = row.comments
            this.form.name = row.name
            this.form.date = row.date
            this.form.id = row.id
            this.form.url = row.url
            this.form.__v = row.__v
            this.form._id = row._id
            this.form.alias = row.alias
        },
        //提交 
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    if (this.type == 1) {
                        const { alias, name, comments } = this.form
                        let result = await reqAddOne({ alias, name, comments })
                        if (result.status == 200) {
                            this.$message({ type: 'success', message: '添加成功' })
                        }
                        this.dialogVisible = false
                        //挂载页面数据
                        this.getList()
                    } else {
                        const { alias, name, comments, date, id, url, __v, _id } = this.form
                        let result = await reqUpdateOne({ alias, name, comments, date, id, url, __v, _id })
                        if (result.status == 200) {
                            this.$message({ type: 'success', message: '修改成功' })
                            this.dialogVisible = false
                            this.form = {}
                            //挂载页面数据
                            this.getList()
                        }
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //删除 
        removeRow(row) {
            this.$confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await reqDelete({ ids: row.id })
                //挂载页面数据
                this.getList()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            console.log(val);
            this.multipleSelection = val;
        },
        //分页
        async renderPageList(current = 1, pageSize = 10) {
            let searchkey = this.pageInfo ? this.pageInfo.searchkey : "";
            let state = this.pageInfo ? this.pageInfo.state : "";
            let user = this.pageInfo ? this.pageInfo.user : "";
            let targetCurrent = current;
            let result = await reqGetPage({
                current: targetCurrent,
                pageSize,
                searchkey
            });
            this.tableData = result.data.docs
            //ComponentPaginationEnd
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            let current = this.pageInfo ? this.pageInfo.current : 1;
            this.renderPageList(current, val);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            let pageSize = this.pageInfo ? this.pageInfo.pageSize : 10;
            this.renderPageList(val, pageSize);
        }


    }
} 
</script>

<style>
</style>